<template>
  <div v-bind:style>123</div>
  <div :class>234</div>
  <div v-html="'<h1>' + hi + '</h1>'"></div>
  <button v-on:click="click">{{ num }}</button><br>
  <input @input="input"><br>
  <input v-model="text">
  <p v-html="text"></p>
  <input type="radio" name="light" v-model="light" value="on">开灯
  <input type="radio" name="light" v-model="light" value="off">关灯
  <p>{{ light == 'on' ? '开灯' : '关灯' }}</p>
  run:<input type="checkbox" v-model="run">
  eat:<input type="checkbox" v-model="eat">
  <p v-html="hobby()"></p>
  <select v-model="language">
      <option value="">请选择语言</option>
      <option value="A">中文</option>
      <option value="B">英文</option>
  </select>
  <p>语言：{{ language == 'A' ? '中文' : (language == 'B' ? '英文' : '') }}</p>
  <div v-for="item in list" :key="item.id">
    <p>{{ item.name }} - ￥{{ item.price }}</p>
  </div>
  <p> 总数：{{ count }} </p>
</template>

<script>
  export default {
    data() {
      return {
        style: {
          backgroundColor: 'red',
          color: 'white',
          fontSize: '24px',
          padding: '10px',
          margin: '10px',
        },
        class: "text",
        hi: 'Hello World!',
        num : 0,
        click: () => {
          this.num += 1
        },
        text: '',
        input: (e) => {
          this.text = e.target.value
          console.log(this.text)
        },
        light : 'on',
        run: false,
        eat: false,
        hobby: () => {
          if (this.run && this.eat) {
            return '[run、eat]'
          } else if (this.run) {
            return '[run]'
          } else if (this.eat) {
            return '[eat]'
          } else {
            return '[]'
          }
        },
        language: '',
        list: [
          { id : '1', name: 'apple', price: 10 },
          { id : '2', name: 'banana', price: 20 },
          { id : '3', name: 'orange', price: 30 }
        ],
      }
    },
    computed: {
      count() {
        return this.list.length
      },
      
    }
  }
</script>

<style scoped>
  .text {
    color: brown;
    font-size: 18px;
    background-color: aqua;
  }
</style>